:root {
  --switch-width: 40px;
  --switch-height: 24px;
  --switch-track-width: 38px;
  --switch-track-height: 14.4px;
  --switch-track-border-radius: calc(20px * 2 / 3);
  --switch-track-background: #fff;
  --switch-track-active-background: var(--color-primary);
  --switch-track-error-background: var(--color-danger);
  --switch-handle-width: 20px;
  --switch-handle-height: 20px;
  --switch-handle-background: var(--color-on-primary);
  --switch-handle-color: var(--color-primary);
  --switch-handle-active-color: var(--color-on-primary);
  --switch-handle-active-background: var(--color-primary);
  --switch-handle-error-background: var(--color-danger);
  --switch-ripple-color: var(--color-primary);
  --switch-ripple-size: 40px;
  --switch-ripple-left: -10px;
  --switch-ripple-active-left: 10px;
  --switch-loading-size: 16px;
  --switch-disabled-opacity: var(--opacity-disabled);
  --switch-variant-width: 52px;
  --switch-variant-height: 32px;
  --switch-variant-track-border-color: #888;
  --switch-variant-track-background: var(--color-surface-container-highest);
  --switch-variant-handle-width: 24px;
  --switch-variant-handle-height: 24px;
  --switch-variant-handle-color: var(--color-on-primary);
  --switch-variant-handle-active-color: var(--color-primary);
  --switch-variant-handle-background: #888;
  --switch-variant-handle-active-background: var(--color-on-primary);
  --switch-variant-ripple-left: -4px;
  --switch-variant-ripple-active-left: 16px;
}

.var-switch {
  display: inline-block;

  &__block {
    position: relative;
    display: flex;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    justify-content: center;
    width: var(--switch-width);
    height: var(--switch-height);
    transition: filter 0.25s;
  }

  &--disabled {
    filter: opacity(var(--switch-disabled-opacity));
    cursor: not-allowed;
  }

  &__track {
    width: var(--switch-track-width);
    height: var(--switch-track-height);
    border-radius: var(--switch-track-border-radius);
    background-color: var(--switch-track-background);
    transition: background-color 0.25s;
    filter: opacity(var(--switch-disabled-opacity));

    &--active {
      background-color: var(--switch-track-active-background);
    }

    &--error {
      background-color: var(--switch-track-error-background) !important;
    }
  }

  &__ripple {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--switch-ripple-color);
    border-radius: 50%;
    overflow: hidden;
    outline: none;
    transition: 0.3s var(--cubic-bezier);
    width: var(--switch-ripple-size);
    height: var(--switch-ripple-size);
    left: var(--switch-ripple-left);

    &--active {
      left: var(--switch-ripple-active-left);
    }
  }

  &__handle {
    border-radius: 50%;
    background-color: var(--switch-handle-background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--switch-handle-color);
    transition: background-color 0.25s;
    width: var(--switch-handle-width);
    height: var(--switch-handle-height);
    outline: none;

    &--active {
      background-color: var(--switch-handle-active-background);
      color: var(--switch-handle-active-color);
    }

    &--error {
      background-color: var(--switch-handle-error-background) !important;
    }
  }

  &--variant {
    .var-switch {
      &__block {
        width: var(--switch-variant-width);
        height: var(--switch-variant-height);

        &:active .var-switch__handle {
          transform: scale(7 / 6);
        }
      }

      &__track {
        width: 100%;
        height: 100%;
        border-radius: calc(var(--switch-variant-height) / 2);
        background-color: var(--switch-variant-track-background);
        border: 2px solid var(--switch-variant-track-border-color);
        filter: none;

        &--active {
          background-color: var(--switch-track-active-background);
          border: none;
        }
      }

      &__ripple {
        left: var(--switch-variant-ripple-left);

        &--active {
          left: var(--switch-variant-ripple-active-left);
        }
      }

      &__handle {
        width: var(--switch-variant-handle-width);
        height: var(--switch-variant-handle-height);
        color: var(--switch-variant-handle-color);
        transform: scale(2 / 3);
        background-color: var(--switch-variant-handle-background);
        transition: transform 0.2s;

        &--active {
          color: var(--switch-variant-handle-active-color);
          background-color: var(--switch-variant-handle-active-background);
          transform: none;
        }
      }

      &--disabled {
        &:active .var-switch__handle {
          transform: none;
        }
      }
    }
  }

  &__loading {
    display: inline-block;
    width: var(--switch-loading-size);
    height: var(--switch-loading-size);
    animation: circle 1.8s linear infinite;

    svg {
      display: block;
      width: 100%;
      height: 100%;

      circle {
        animation: circular 1.5s ease-in-out infinite;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
      }
    }

    @keyframes circle {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes circular {
      0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
      }

      50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -40;
      }

      100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -120;
      }
    }
  }
}
